<template>
	<view class="container">
		<uni-nav-bar fixed="true" color="#ffffff" :border="false" left-icon="back" @clickLeft="back"
			background-color="rgba(0, 0, 0, 0)" :status-bar="true" title="商家服务" />
		<image :src="details.banner" class="main-img" mode="aspectFill"></image>
		<view class="seller-infor">
			<image :src="details.image" mode="aspectFill" class="logo"></image>
			<view class="text">
				<view class="name-wrapper">
					<view class="name ell">{{details.name || ''}}</view>
					<image src="/static/tel02.png" class="tel" @click="handlePhoneCall(details.phone)"></image>
				</view>
				<view class="txt">
					<image src="/static/wifi.png" class="icon"></image>
					<view class="con ell" @click="toLink"><text
							class="acc ell">账号：{{details.wifiAccountNo || ''}}</text> 密码：{{details.wifiPasssword || ''}}
					</view>
				</view>
				<view class="txt" @click="handleOpenLocation">
					<image src="/static/address.png" class="icon"></image>
					<view class="con ell">
						{{details.provinceName || ''}}{{details.cityName || ''}}{{details.districtName || ''}}{{details.address || ''}}
					</view>
				</view>
			</view>
		</view>
		<view class="titleTab">
			<view class="title left">全部服务</view>
			<view class="title right">
				<view>
					{{ typeName }}
				</view>
				<view class="timer">
					门店服务时段：{{details.serviceDoBussinessTime}}
				</view>
			</view>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" class="menu-wrapper">
				<view class="menu-item" :class="{'on': type.id == catId}" v-for="(type, index) in typeList"
					@click="handleSwitchType(type, index)" :key="type.id">
					<text>{{type.name}}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="con-wrapper">
				<view v-for="(productList, i) in list" :key="i">
					<template v-if="i == index">
						<view class="product-item" v-for="product in productList" @click="handleDetails(product.id)"
							:key="product.id">
							<image :src="product.image" mode="aspectFill" class="img"></image>
							<view class="text">
								<view class="name ell">{{product.name}}</view>
								<view class="specifications ell" v-if="product.normal">{{product.normal}}</view>
								<view class="bottom-wrapper">
									<view class="price">¥ {{product.price}}</view>
									<button type="default" class="btn">预约</button>
								</view>
							</view>
						</view>
					</template>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import {
		frontPage,
		selectByType
	} from '@/api/product.js'
	import {
		shopDetail
	} from '@/api/store.js'
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				shopId: '',
				type: 4, // 1.积分商品 2.特价商品 3.商户超市商品 4.商户服务 5.售货机商品
				typeList: [],
				details: {},
				list: [],
				pageNum: 1,
				pageSize: 1000,
				catId: '',
				typeName: '',
				index: 0
			}
		},
		onLoad(option) {
			if (option.shopId) {
				this.shopId = option.shopId
				this.getDetails()
			}
		},
		methods: {
			toLink() {
				uni.navigateTo({
					url: `/pages/store/wifi?details=${encodeURIComponent(JSON.stringify(this.details))}&shopId=${this.details.id}`
				})
			},
			handleOpenLocation() {
				const that = this;
				const {
					latitude,
					longitude,
					name,
					cityName,
					districtName,
					address
				} = that.details;
				let lng = that.convert2TecentMap(longitude, latitude).lng
				let lat = that.convert2TecentMap(longitude, latitude).lat
				uni.openLocation({
					latitude: lat,
					longitude: lng,
					name,
					address: cityName + districtName + address
				});
			},
			convert2TecentMap(lng, lat) {
				if (lng == '' && lat == '') {
					return {
						lng: '',
						lat: ''
					}
				}
				var x_pi = 3.14159265358979324 * 3000.0 / 180.0
				var x = lng - 0.0065
				var y = lat - 0.006
				var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
				var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
				var qqlng = z * Math.cos(theta)
				var qqlat = z * Math.sin(theta)
				return {
					lng: qqlng,
					lat: qqlat
				}
			},
			getDetails() {
				const data = {
					shopId: this.shopId
				}
				shopDetail(data).then(respanse => {
					this.details = respanse.result
					this.getTypeList()
				})
			},
			getTypeList() {
				const data = {
					type: this.type,
					shopId: this.details.id
				}
				selectByType(data).then(respanse => {
					this.typeList = respanse.result
					if (respanse.result.length > 0) {
						this.catId = respanse.result[0].id
						this.typeName = respanse.result[0].name
						this.index = 0
						this.getList()
					}
				})
			},

			getList() {
				const data = {
					catId: this.catId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					type: this.type,
					shopId: this.details.id
				}
				frontPage(data).then(respanse => {
					const {
						rows,
						total
					} = respanse.result
					if (rows) {
						this.$set(this.list, this.index, rows)
					} else {
						this.$set(this.list, this.index, [])
					}
				})
			},

			//  切换分类
			handleSwitchType(item, index) {
				this.catId = item.id
				this.typeName = item.name
				this.index = index
				if (!this.list[index]) {
					this.pageNum = 1
					this.getList()
				}
			},

			handlePhoneCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				});
			},

			handleDetails(id) {
				uni.navigateTo({
					url: `/pages/product-details/index?productId=${id}`
				})
			},

			back() {
				uni.navigateBack()
			}
		}
	}
</script>
<style>
	body {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	/deep/.uni-navbar__placeholder {
		display: none !important;
	}

	.main-img {
		display: block;
		width: 100%;
		height: 335rpx;
	}

	.titleTab {
		display: flex;
		justify-content: space-between;

		.title {
			box-sizing: border-box;
			padding: 20rpx 20rpx;
			display: flex;
			text-align: center;
			line-height: 38rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #060606;
		}

		.left {
			width: 149rpx;
		}

		.right {
			width: calc(100% - 149rpx);
			display: flex;
			padding: 20rpx 0 20rpx 40rpx;
			justify-content: space-between;
			align-items: center;

			.timer {
				font-size: 20rpx;
				font-weight: normal;
				margin-right: 30rpx;
			}
		}

	}

	.seller-infor {
		display: flex;
		margin: -104rpx 48rpx 0;
		padding: 33rpx 28rpx 35rpx 46rpx;
		background-color: #fff;
		box-shadow: 1px 5rpx 9rpx 0px rgba(196, 197, 197, 0.3);
		border-radius: 8rpx;

		.logo {
			width: 132rpx;
			height: 132rpx;
			background-color: #F5F5F5;
			border-radius: 10rpx;
		}

		.text {
			flex: 1;
			padding-top: 3rpx;
			margin-left: 22rpx;
			overflow: hidden;

			.name-wrapper {
				display: flex;

				.name {
					flex: 1;
					line-height: 40rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: #060606;
				}

				.tel {
					padding: 5rpx 5rpx 5rpx 15rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.txt {
				display: flex;
				margin-top: 11rpx;

				.icon {
					margin-right: 6rpx;
					width: 34rpx;
					height: 34rpx;
				}

				.con {
					flex: 1;
					line-height: 34rpx;
					font-size: 24rpx;
					color: #666666;

					.acc {
						display: inline-block;
						vertical-align: middle;
						width: 50%;
					}
				}
			}
		}
	}

	.content {
		display: flex;
		margin-top: 20rpx;
		height: calc(100vh - 600rpx);

		.menu-wrapper {
			width: 149rpx;
			height: calc(100vh - 600rpx);
			background: #F1F1F1;

			.title {
				position: relative;
				padding: 15rpx 0 13rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #060606;
				background-color: #fff;

				&::after {
					content: " ";
					position: absolute;
					left: 55rpx;
					right: 55rpx;
					bottom: 15rpx;
					border-bottom: 3px solid #ED602B;
				}
			}

			.menu-item {
				display: table;
				width: 100%;
				height: 121rpx;
				text-align: center;

				text {
					display: table-cell;
					vertical-align: middle;
					line-height: 34rpx;
					text-align: center;
					font-size: 24rpx;
					color: #060606;
				}

				&.on {
					position: relative;
					background-color: #fff;
				}
			}
		}

		.con-wrapper {
			flex: 1;
			height: calc(100vh - 600rpx);

			.title {
				padding: 37rpx 0 2rpx 36rpx;
				line-height: 38rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #060606;
			}

			.time {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.timer {
					font-size: 20rpx;
					font-weight: normal;
					margin-right: 30rpx;
				}
			}

			.product-item {
				display: flex;
				padding: 29rpx 24rpx 29rpx 36rpx;

				.img {
					width: 178rpx;
					height: 177rpx;
					border-radius: 10rpx;
					background-color: #F5F5F5;
				}

				.text {
					flex: 1;
					margin-left: 22rpx;
					padding-top: 20rpx;
					overflow: hidden;

					.name {
						line-height: 38rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #080808;
					}

					.specifications {
						margin-top: 5rpx;
						line-height: 32rpx;
						font-size: 22rpx;
						color: #818181;
					}

					.bottom-wrapper {
						display: flex;
						justify-content: space-between;
						margin-top: 15rpx;

						.price {
							line-height: 56rpx;
							font-size: 34rpx;
							color: #EA5E2E;
						}

						.btn {
							width: 132rpx;
							height: 55rpx;
							font-size: 22rpx;
							color: #fff;
							background: linear-gradient(-90deg, #ED602B, #F19136);
							border-radius: 28rpx;
						}
					}
				}
			}
		}
	}
</style>
